Попередня сторінка: 21. Розмічання тексту засобами HTML
Наступна сторінка: 23. Розмічання таблиць засобами HTML
Сайт стає більш цікавим і наочним, якщо його вебсторінки доповнити графічними зображеннями, а також застосувати гіперпосилання.
Встав/іяння малюнків
На вебсторінку сайту можна додавати різноманітні зображення.
Щоб вставити на вебсторінку малюнок з файлу, необхідно скористатися тегом <img src = "my.jpg">, де img — назва тегу, призначеного для вставляння зображення, src = "my.jpg" — атрибут, в якому вказується ім’я файлу з малюнком, що міститься в одній папці з HTML-файлом.
В атрибуті можна використовувати імена графічних файлів із розширеннями .jpg, .jpeg, .gif, .png або .bmp. Якщо малюнок і HTML-файл містяться в різних папках, то, крім імені файлу, потрібно вказувати шлях до нього із зазначенням назв відповідних папок.
Якщо малюнок міститься у вкладеній папці images:
<img src = "images/my.jpg">.
Якщо малюнок міститься у зовнішній папці images:
<img src = "../images/my.jpg">.
Для визначення способу розташування малюнка на вєбсторінці використовують певні атрибути тегу. Наведемо можливе розташування малюнка на вєбсторінці (див. рисунок) та обтікання його текстом.
Проаналізуємо декілька тегів для вставляння малюнків:
• малюнок з лівого краю, обтікання текстом праворуч:
<img src = "prl.png" align = "left">
• відстань між текстом і малюнком по вертикалі 10 пікселів, по горизонталі — ЗО пікселів:
• опис малюнка:
Примітка. Якщо навести вказівник на малюнок, з’явиться текст — Моє фото. Крім того, значення параметра alt буде виведене на екран замість малюнка, якщо у браузері вимкнуто показ малюнків.
• ширина малюнка 100 пікселів, висота — 20% від висоти робочої області вікна браузера:
• товщина рамки навколо малюнка — 5 пікселів:
Додавання гіперпоси/іань
Сайт складається з багатьох вебсторінок, пов’язаних гіперпосилан-нями, одна з яких є головною. Ця сторінка сайту зазвичай міститься у файлі index.html і відкривається першою. Для створення гіперпоси-лань на вебсторінки сайту та зовнішні ресурси інтернету використовують тег <а>...</а>.
Приклад додавання гіперпосилань до рисунків і фрагментів тексту. Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд: <а href = "prf.html"> Подивитися фото </а>
Щоб гіперпосилання можна було додати до малюнка, необхідно вказати тег вставляння малюнка:
Після клацання напису Перша сторінка (Друга сторінка, Третя сторінка) відбудеться перехід за гіперпосиланням на відповідну вебсторінку.
Для повернення на головну сторінку на інших вебсторінках сайту мають бути відповідні гіперпосилання. Наприклад:
Питання для самоперевірки
1. Як вставити малюнок на вебсторінку?
2. У чому відмінність між значеннями атрибутів для вставлення малюнку із поточної, внутрішньої і зовнішньої папок?
3. Як вирівняти малюнок за правим краєм вікна браузера?
4. Як задати розмір малюнка? Що означає розмір у відсотках?
5. Як створити гіперпосилання?
6. Як додати до малюнка гіперпосилання на іншу вебсторінку?
Вправа 22
Створити вебсторінку сайту з малюнками і гіперпосиланнями.
1) Створіть папку з назвою Вправа 22. Знайдіть в інтернеті малюнок на шкільну тематику та збережіть його у створеній папці.
2) Створіть HTML-документ (головну сторінку сайту) із заголовком Розклад уроків. Додайте малюнок, збережений у папці, та текст (меню сайту): понеділок, вівторок, середа, четвер, п'ятниця. Збережіть створений документ з іменем index.html у папці.
3) Створіть п’ять HTML-документів (сторінок вебсайту) з розкладом уроків на кожний із цих днів тижня. До кожної сторінки додайте зверху її назву та знизу слово Головна, яке буде гіперпосиланням на головну сторінку. Збережіть сторінки сайту в папці з іменами 1.html; 2.html; 3.html; 4.html; 5.html.
4) У файлі index.html зробіть гіперпосилання на п’ять створених сторінок, а у файлах 1.html-5.html — на головну сторінку.
5) Відформатуйте тексти і графічні зображення.
6) Перевірте роботу сайту. Завершіть роботу за комп’ютером.
Комп'ютерне тестування
Виконайте тестове завдання 22 із автоматичною перевіркою результату.
Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)
Наступна сторінка: 23. Розмічання таблиць засобами HTML